<div ng-init="$ctrl.init()" data-mode="{{$ctrl.viewmodel.Mode}}">
  <!-- Invalid browser alert, and reminder to enable media things -->
  <div class="container-fluid">
    <div class="row-fluid instructions">
      <div class="span12">
        <div class="alert">
          <h4>Look Up!</h4>
          Your browser should be asking you to enable your webcam and
          microphone.
          <strong>This site will not work until you provide access</strong>.
        </div>
      </div>
    </div>
    <div class="row-fluid browser-warning">
      <div class="span12">
        <div class="alert alert-error">
          <h4>Your browser does not appear to support WebRTC.</h4>
          Try either the
          <a href="https://nightly.mozilla.org/">latest Firefox nightly build</a
          >, or
          <a href="https://www.google.com/intl/en/chrome/browser/beta.html"
            >Google Chrome Beta</a
          >
          to join the fun.
        </div>
      </div>
    </div>
  </div>
  <!-- Top Bar -->
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container-fluid">
        <a class="brand pull-left" href="#">WebRTC Video Caller</a>
        <span
          class="loading-indicator icon-spinner-3"
          ng-show="$ctrl.viewmodel.Loading"
        ></span>
        <div class="nav-collapse collapse">
          <p class="navbar-text pull-right">
            You are <span ng-bind="$ctrl.viewmodel.Username"></span>
          </p>
        </div>
      </div>
    </div>
  </div>
  <!-- App Area -->
  <div class="container-fluid">
    <div class="row-fluid">
      <!-- Side Bar -->
      <div class="span3">
        <!-- In Call Actions -->
        <div class="well actions">
          <div class="status" ng-bind="$ctrl.viewmodel.Mode"></div>
          <button class="btn btn-danger hangup" ng-click="$ctrl.hangup()">
            Hang Up
          </button>
        </div>
        <!-- User List -->
        <div class="well user-list">
          <ul class="nav nav-list">
            <li class="nav-header">
              Online Users
              <small ng-bind="$ctrl.viewmodel.Users.length"></small>
            </li>
            <!-- ko foreach: Users -->
            <li
              class="user"
              ng-repeat="user in $ctrl.viewmodel.Users"
              ng-click="$ctrl.callUser(user.ConnectionId)"
              data-cid="{{user.ConnectionId}}"
              title="{{user.Username}}"
            >
              <a class="btn">
                <!-- only using an a here for bootstrap styling -->
                <div class="username" ng-bind="user.Username"></div>
                <div
                  class="helper"
                  class="$ctrl.viewmodel.getUserStatus(user)"
                ></div>
              </a>
            </li>
            <!-- /ko -->
          </ul>
        </div>
      </div>
      <!-- Videos -->
      <div class="span9">
        <div class="row-fluid">
          <div class="span6">
            <h4>You</h4>
            <a class="btn" ng-click="$ctrl.toogleMute()">Toogle Mute</a>
            <a class="btn" ng-click="$ctrl.toogleVideo()">Toogle Video</a>
            <video
              width="320"
              height="240"
              class="video mine cool-background"
              autoplay="autoplay"
            ></video>
          </div>
          <div class="span6">
            <h4>Partner</h4>
            <video
              width="320"
              height="240"
              class="video partner cool-background"
              autoplay="autoplay"
            ></video>
          </div>
        </div>
      </div>
    </div>
    <!-- Footer -->
    <hr />
    <footer>
      <p class="pull-left">
        <a
          href="https://github.com/mgiuliani/webrtc-video-chat/"
          target="_blank"
          ><strong>GitHub</strong></a
        >
        | <a href="http://www.webrtc.org/" target="_blank">WebRTC</a> |
        <a href="http://twitter.github.com/bootstrap/" target="_blank"
          >Bootstrap</a
        >
        | <a href="http://knockoutjs.com/" target="_blank">KnockoutJS</a> |
        <a href="http://fabien-d.github.com/alertify.js/" target="_blank"
          >Alertify</a
        >
        |
        <a href="http://lea.verou.me/css3patterns/" target="_blank"
          >CSS3 Patterns</a
        >
      </p>
    </footer>
  </div>
</div>
